<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>CleanSlateCSS Demo 2</title>
  <!--<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />-->
  <!--<link rel="stylesheet" href="http://cleanslatecss.googlecode.com/svn/trunk/cleanslate.css" type="text/css" />-->  
  <link rel="stylesheet" href="../cleanslate.css" type="text/css" />
  <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="../cleanslate_ie7.css" /><![endif]-->
  <link rel="stylesheet" href="stylesheets/demo.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <style>
    /* Host stylesheet */
	
	#contents {
		width: 400px;
	}
	
	#contents div {
		border: dashed 1px red;
		margin: 10px;
		padding: 10px;
		background-color: yellow;
		color: black;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		
	}
	
		#contents div h2 {
			margin: 20px 0 20px 0;
			font-weight: normal;
			font-size: 1.6em;
			color: #ff0000;
		}
		
		#contents div blockquote {
			padding: 10px;
			background-color: #FFFF66;
			font-style: normal;
			border: solid 1px orange;
		}
		
		#contents div ul {
			list-style-type: square;
		}
	
  </style>

  <style>
    /* Guest stylesheet */
    .guest1 {
      	background-color: white;
      	font-size: 12px;
      	color: blue;
	  	border: solid 1px blue;
		padding: 20px;
		margin-top: 10px;
	 	font-family: Arial, Helvetica, sans-serif;
    }
		.guest1 h2 {
			margin: 0 0 10px 0;
			font-weight: bolder;
		}
		
		.guest1 blockquote {
			padding: 10px 0 10px 0; 
			border: none; 
			font-style: italic;
		}
		
		.guest1 ul {
			padding-left: 10px;
		}
		
    .guest2 {
    	background-color: white !important;
      	font-size:12px !important;
      	color: blue !important;
	  	border: solid 1px !important;
	  	padding: 20px !important;
		margin-top: 10px !important;
	  	font-family: Arial, Helvetica, sans-serif !important;
    }
		.guest2 h2 {
			margin: 0 0 10px 0 !important;
			font-weight: bolder !important;
		}
		
		.guest2 blockquote {
			padding: 10px 0 10px 0 !important; 
			border: none !important;
			font-style: italic !important;
		}
		
		.guest2 ul {
			padding-left: 10px !important;
		}
		
  </style>
</head>

<body>
  <div id="intro">
    <a href="http://code.google.com/p/cleanslatecss/">CleanSlate CSS</a>
    <a href="1.html">Demo 1</a> 
    <span>Demo 2</span>
    <a href="3.html">Demo 3</a>
    <a href="4.html">Demo 4</a>
  </div>
  <div class="host">
    <div id="contents">
      <div id="main-content">
   	    <h1>Host content</h1>
        <blockquote>
        <p>Mary had a little lamb</p>
        </blockquote>
        <ul>
          <li>blah</li>
          <li>blah</li>
        </ul>
      </div>
      
      <div id="sidebar">
        <div class="guest1">
          <h2>Guest content (not cleanslated)</h2>
          <code>css class='guest'</code>
          <blockquote>
            <p>Mary had a little lamb</p>
          </blockquote>
          <ul>
            <li>blah</li>
            <li>blah</li>
          </ul>
        </div>
    
        <div class="cleanslate">
          <h2>Cleanslated content</h2>
          <code>css class='cleanslate'</code>
          <blockquote>
            <p>Mary had a little lamb</p>
          </blockquote>
          <ul>
            <li>blah</li>
            <li>blah</li>
          </ul>
        </div>
    
        <div class="guest2 cleanslate">
          <h2>Cleanslated guest content</h2>
          <code>css class='guest cleanslate'</code>
          <blockquote>
            <p>Mary had a little lamb</p>
          </blockquote>
          <ul>
            <li>blah</li>
            <li>blah</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
<!--

Notes
* Include html5 demo, with ie shiv, using new elements
* Include demo of border-color and font-size relative

-->
</html>